<script setup lang="ts">
import { download, formatEnum, get, loadFile, message, post } from '@/utils'
import useTable from '@/hooks/useTable'
import { Tooltip, Space } from '@arco-design/web-vue'
import { IconQuestionCircle } from '@arco-design/web-vue/es/icon'
import { BtnPermission } from '@/enum/permission'
const { formatColumns } = useTable()
const searchQuery = reactive({})
const formRef = ref()
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
}

const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize, settleTimeBegin: params.times ? params.times[0] + ' 00:00:00' : '', settleTimeEnd: params.times ? params.times[1] + ' 23:59:59' : '' }

    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-shop/sys-seller/order/settle/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const columns = formatColumns([
  {
    title: '订单号',
    dataIndex: 'orderNo',
    hideInSearch: false,
    width: 200,
  },
  {
    title: '支付金额',
    dataIndex: 'payAmount',
    width: 120,
  },
  {
    title: '支付单号',
    dataIndex: 'payNo',
    hideInSearch: false,
    width: 200,
  },
  {
    title: '外部支付单号',
    dataIndex: 'payBizNo',
    hideInSearch: false,
    width: 200,
    ellipsis: true,
  },
  {
    title: '支付状态',
    dataIndex: 'payStatus',
    hideInSearch: false,
    width: 120,
    valueEnum: {
      1: { text: '已支付', status: 'Success' },
      0: { text: '未支付', status: 'Error' },
    },
  },

  {
    dataIndex: 'settleAmount',
    width: 150,
    title: () => {
      return h(Space, {}, [h('span', {}, '结算金额'), h(Tooltip, { content: '实付金额-退款金额-服务费' }, () => h(IconQuestionCircle))])
    },
  },
  {
    title: '服务费比例',
    dataIndex: 'serveRatio',
    width: 120,

    render: ({ record }) => h('span', {}, record.serveRatio + '%'),
  },
  {
    dataIndex: 'serveAmount',
    title: () => {
      return h(Space, {}, [h('span', {}, '服务费'), h(Tooltip, { content: '实付金额-退款金额*服务费比例问号' }, () => h(IconQuestionCircle))])
    },
    width: 120,
  },
  {
    title: '商品总价',
    dataIndex: 'goodsPrice',
    width: 120,
  },
  {
    title: '积分抵扣',
    dataIndex: 'deductIntegral',
    width: 120,
  },
  {
    title: '积分金额',
    dataIndex: 'deductIntegralMoney',
    width: 120,
  },
  {
    title: '平台优惠券抵扣',
    dataIndex: 'deductCouponSystem',
    width: 120,
  },
  {
    title: '退款金额',
    dataIndex: 'refundAmount',
    width: 120,
  },
  {
    title: '结算备注',
    dataIndex: 'settleRemark',
    width: 200,
    ellipsis: true,
  },
  {
    title: '结算状态',
    dataIndex: 'settleStatus',
    hideInSearch: false,
    width: 120,
    valueEnum: {
      '-1': { text: '结算失败', status: 'Error' },
      1: { text: '已结算', status: 'Success' },
      0: { text: '未结算', status: 'Processing' },
    },
  },
  {
    title: '结算方式',
    dataIndex: 'settleWay',
    hideInSearch: false,
    width: 120,
    valueEnum: {
      1: '二清',
      2: '分账',
    },
  },
  {
    title: '结算时间',
    dataIndex: 'settleTime',
    width: 200,
  },
  {
    title: '时间筛选',
    dataIndex: 'times',
    width: 200,
    valueType: 'dateRange',
    hideInTable: true,
    hideInSearch: false,
  },
  {
    title: '操作',
    dataIndex: 'options',
    width: 200,
    fixed: 'right',
    btnList: [
      {
        permission: BtnPermission.编辑,
        name: '手动结算',
        handle: ({ record }) => {
          post({ url: '/server-shop/sys-seller/order/settle/clearing?ids=' + record.id, data: { ids: record.id } }, ({ code, msg }) => {
            if (code == 200) actionRef.value.reload()
            message({
              type: code == 200 ? 'success' : 'error',
              content: msg,
            })
          })
        },
      },
      // {
      //   name: '查看',
      //   handle: () => {
      //     console.log('查看')
      //   },
      // },
    ],
  },
])
/**导出 */
const onExcel = () => {
  // if (!selectedKeys.value.length) {
  //   message({
  //     type: 'error',
  //     content: '至少选择一条数据',
  //   });
  // } else

  const query = {
    ...searchQuery,
    ...formRef.value.model,
    settleTimeBegin: formRef.value.times ? formRef.value.times[0] + ' 00:00:00' : '',
    settleTimeEnd: formRef.value.times ? formRef.value.times[1] + ' 23:59:59' : '',
  }
  console.log('🚀 ~ onExcel ~ formRef.value:', formRef.value.model)
  //   if (formRef.value.model?.createTime?.length) {
  //     query.createTimeBegin = formRef.value.model.createTime?.[0] + ' 00:00:00'
  //     query.createTimeEnd = formRef.value.model.createTime?.[1] + ' 23:59:59'
  //   }
  download('/server-shop/sys-seller/order/settle/excel', query)
}
const total = reactive({ data: 0, data1: 0, data0: 0 })
const getTotal = () => {
  get({
    url: '/server-shop/sys-seller/order/settle/total',
    data: formRef.value?.model,
  }).then(({ data }) => {
    Object.assign(total, data)
  })
}
onMounted(() => {
  getTotal()
})
</script>

<template>
  <div class="page">
    <ProTable
      :columns="columns"
      @submit="getTotal"
      @reset="getTotal"
      :request="request"
      row-key="id"
      :form-ref="ref => (formRef = ref)"
      :pagination="pagination"
      header-title=" "
      column-resizable
      :scroll="{ x: 1000 }"
      :params="searchQuery"
      :bordered="{ cell: true }"
      :action-ref="ref => (actionRef = ref)"
    >
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
      </template>
      <template #tool-bar>
        <a-button type="primary" class="mb10" @click="onExcel" v-permission="[BtnPermission.查看]">
          <template #icon>
            <icon-download />
          </template>
          导出</a-button
        >
        <div class="mb10">
          累计佣金:
          <span style="color: rgb(var(--link-6))">￥{{ total.data }}</span>
        </div>
        <div class="mb10">
          待结算:
          <span style="color: rgb(var(--link-6))">￥{{ total.data0 }}</span>
        </div>
        <div class="mb10">
          已结算:
          <span style="color: rgb(var(--link-6))">￥{{ total.data1 }}</span>
        </div>
      </template>
      <template #money="{ record }"> </template>
    </ProTable>
  </div>
</template>
